<template>
    <div id="footer-container">
        <div class="footer-buttons">
            <router-link to="/DuNengCircle" class="footer-btn">杜能圈</router-link>
            <router-link to="/MapSearch" class="footer-btn">地图查询</router-link>
            <router-link to="/RealCase" class="footer-btn">真实案例</router-link>
            <router-link to="/MindPlot" class="footer-btn">思维导图</router-link>
        </div>
    </div>
</template>

<script setup>
</script>

<style scoped>
#footer-container {
    position: fixed;
    bottom: 1%;
    height: 3vh;
    width: 100%;
    background-image: url(../assets/uiResources/footer.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;    /* 垂直居中 */
    z-index: 1000;
}

.footer-buttons {
    display: flex;
    gap: 20px; /* 按钮间距 */
}

.footer-btn {
    color: white;           /* 文字颜色 */
    text-decoration: none;  /* 去除下划线 */
    font-weight: bold;      /* 加粗 */
    padding: 5px 10px;      /* 内边距 */
    border-radius: 4px;     /* 圆角 */
    background: rgba(0, 0, 0, 0.3); /* 半透明背景 */
    transition: all 0.3s;   /* 悬停动画 */
}

.footer-btn:hover {
    background: rgba(0, 0, 0, 0.5); /* 悬停效果 */
}

/* 当前激活的路由按钮高亮 */
.footer-btn.router-link-active {
    background: rgba(255, 255, 255, 0.2);
    border-bottom: 2px solid white;
}
</style>